<template>
	<div class="upload">
		<el-form ref="form" :model="formDate" label-width="80px">
		<el-upload ref="upload" class="upload-demo" :headers = "headers" :auto-upload="false" :limit="1" drag :action="uploadFilePath" multiple :on-change="fileChange" :on-success="success" :before-upload="fileBeforeUpload"  :on-progress="fileProgress" :on-remove="fileRemove">
			<i class="el-icon-upload"></i>
			<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
			<template #tip>
				<div class="el-upload__tip">
					只能上传 mp4/jpg/png 文件，且不超过 500kb
				</div>
			</template>
		</el-upload>
		<el-button style="width: 100%;" type="primary" @click="onSubmit">立即创建</el-button>
		</el-form>
	</div>
</template>

<script>
	import {post} from '../../plugin/http.js'
	export default {
		name: 'upload',
		components: {

		},
		data() {
			return {
				formDate:{},
				uploadFilePath:"/api/fileupload",
				headers:{Authorization:localStorage.getItem('token')}
			}
		},
		methods: {
			onSubmit(){
				this.$refs.upload.submit();
			},
			fileBeforeUpload(file){
				console.log(file);
			},
			//文件状态改变
			fileChange(file, fileList){
				debugger
				
			},
			//上传文件
			fileProgress(event, file, fileList){
				
			},
			//文件删除
			fileRemove(file, fileList){
				console.log(file);
			},
			//上传成功
			success(){
				debugger
				this.$emit("clone");
			}
			
		},
	}
</script>

<style scoped="scoped">
	.upload{
		width: 100%;
	}
	.el-form{
		    margin: auto;
		    position: relative;
		    width: 40%;
	}
</style>
